<template>
	<!-- 登录界面 -->
	<view class="content">
		<!-- 头部 -->
		<view class="login_top">
			<view class="login_top_text">
				<view class="login_top_list">
					<text class="login_top_list_name login_top_active">登录</text>
					<text class="login_top_list_sanjiao"></text>
				</view>
				<view class="login_top_list">
					<text class="login_top_list_name">短信登录</text>
					<text class="login_top_list_sanjiao"></text>
				</view>
			</view>
		</view>
		<!-- 表单区域 -->
		<form name="loginform" @submit="loginsubmit">
			<view class="loginform">
				<!-- 账号区域 -->
				<view class="loginform_input">
					<view class="loginform_input_list login_border_b">
						<view class="loginform_input_list_left">
							<view class="loginformleft_img">
								<image mode="widthFix" src="http://localhost:3000/img/zc1.png"></image>
							</view>
							<input name="username" placeholder="请输入手机号" />
						</view>
					</view>
					<view class="loginform_input_list">
						<view class="loginform_input_list_left">
							<view class="loginformleft_img">
								<image mode="widthFix" src="http://localhost:3000/img/zc2.png"></image>
							</view>
							<input name="password" password placeholder="请输入密码" />
						</view>
						<view class="loginform_input_right">
							<image mode="widthFix" src="http://localhost:3000/img/yanjing.png"></image>
						</view>
					</view>
				</view>
				<!-- 快速注册区域 -->
				<view class="login_register">
					<navigator url="./register">快速注册></navigator>
					<navigator>忘记密码</navigator>
				</view>
				<!-- 登录按钮 -->
				<button form-type="submit" style="margin:50rpx 0 ;border-radius: 10rpx;font-size: 28rpx;" type="warn">登录</button>
				<!-- 其他登录方式 -->
				<view class="login_order">
					<view class="login_order_zhi">
						<image mode="widthFix" src="http://localhost:3000/img/zhifubao.png"></image>
					</view>
					<view class="login_order_zhi">
						<image mode="widthFix" src="http://localhost:3000/img/weixin.png"></image>
					</view>
				</view>
				<!-- 首选协议 -->
				<view class="login_yinsi">
					<navigator>首选隐藏政策</navigator>
				</view>
			</view>
		</form>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				
			}
		},
		methods:{
			// 登录验证
			loginsubmit(val){
				if(val.detail.value.username.trim()==""){
					// 消息提示
					uni.showToast({
						title:"请输入用户名",
						icon:"none"
					})
				}else if(val.detail.value.password.trim()==""){
					// 消息提示
					uni.showToast({
						title:"密码不能为空",
						icon:"none"
					})
				}else{
					uni.request({
						url:"http://localhost:3001/goods_login",
						data:{
							username:val.detail.value.username.trim(),
						},
						method:"POST",
						success:(res)=>{
							if(res.data.data.length>0){
								if(res.data.data[0].password==val.detail.value.password){
									// 登录成功
									console.log(res,'登录')
									// 将账户信息保存在本地缓存中
									uni.setStorage({
										key:"user",
										data:JSON.stringify(res.data.data[0]),
										success() {
											// 跳转到我的页面
											uni.switchTab({
												url:"./mone"
											})
										}
									})
								}else{
									// 登录失败
									// 消息提示
									uni.showToast({
										title:"密码错误",
										icon:"none"
									})
								}
							}else{
								uni.showToast({
									title:"手机号不存在",
									icon:"none"
								})
							}
						}
					})
				}
			}
		}
	}
</script>

<style>
	page{
		height: 100%;
		width: 750rpx;
		background-color: #F3F3F3;
	}
	image{
		width: 100%;
		display: block;
	}
	.login_top{
		width: 100%;
		height: 320rpx;
		background-color: #EF3646;
		background:url(http://localhost:3000/img/loginback.png) no-repeat center;
		background-size: 100%;
		display: flex;
		flex-direction: column;
		justify-content:flex-end;
	}
	
	.login_top_text{
		display: flex;
		justify-content: center;
	}
	.login_top_list{
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-end;
		font-size: 24rpx;
		color: #FFFFFF;
	}
	.login_top_list_sanjiao{
		width: 0;
		height: 0;
		border: 14rpx solid rgba(0,0,0,0);
		border-bottom-color: #fff;
	}
	/* 被选中的登录方式的字体大小 */
	.login_top_active{
		font-size: 32rpx;
	}
	.loginform{
		margin: 46rpx 20rpx;
	}
	.loginform_input{
		border-radius: 20rpx;
		border: 2rpx solid #eaeaea;
		overflow: hidden;
		background-color: #FFFFFF;
	}
	.loginform_input_list{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 34rpx 30rpx;
	}
	.loginform_input_list_left{
		flex: 1;
		display: flex;
		align-items: center;
		font-size: 28rpx;
		color: #999;
	}
	.loginformleft_img{
		width: 34rpx;
		margin-right: 20rpx;
	}
	.loginform_input_right{
		width: 40rpx;
	}
	.login_border_b{
		border-bottom: 2rpx solid #eeeeee;
	}
	input{
		width: 80%;
	}
	
	.login_register{
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 40rpx 0;
		font-size: 24rpx;
		color: red;
	}
	
	.login_order{
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 100rpx;
	}
	.login_order_zhi{
		width: 74rpx;
		margin:0 10rpx;
	}
	.login_yinsi{
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 22rpx;
		margin-top: 20rpx;
		text-decoration:underline;
	}
</style>
